<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>按钮示例</title>
  <style>
    .button-container {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
    }

    .button {
      margin: 5px;
      padding: 10px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      position: relative;
      cursor: pointer;
      background-image: url('btn.png');
      /* 默认按钮图片 */
      background-size: cover;
      background-repeat: no-repeat;
    }

    .button--active {
      background-image: url('btn-active.png');
      /* 激活状态按钮图片 */
    }

    .eye-icon {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      width: 20px;
      /* 调整图标大小 */
      height: 20px;
      background-size: cover;
      background-repeat: no-repeat;
    }

    .eye-icon--active {
      background-image: url('icon-active.png');
      /* 激活状态眼睛图片 */
    }

    .eye-icon--default {
      background-image: url('icon.png');
      /* 默认眼睛图片 */
    }
  </style>
</head>

<body>
  <button id="mainButton">显示二级按钮</button>
  <div id="buttonContainer" class="button-container"></div>

  <script>
    document.getElementById('mainButton').addEventListener('click', function () {
      // 固定的数据
      // const buttonData = [
      //     { name: "按钮1", status: 1 },
      //     { name: "按钮2", status: 0 }
      // ];
      const Params = {
        "全地层": "地表:0&第四系:0&基岩面:0&直罗组:0&J2Z5:0&延安组5段:0&1-2煤:0&Y5S4:0&Y5S3:0&Y5S2:0&Y5S1:0&延安组4段:082-2煤:0&Y4S3:0&Y452:0&Y451:8&延安组3段:083-1煤:0&Y3S2:8&Y3S1:8&延安组2段:084-2煤:0&Y256:0&Y2S5:884-3煤:0&Y254:0&Y253:084-4煤:0&Y252:0&Y251:8&延安组1段:085-2煤:0&v152:0&y151:8&富县组:0&永坪组:0&T3YS:0"
      }

      // 解析数据
      const rawData = Params["GzmDClist"].split('&')
      const buttonData = rawData.map(item => {
        const [name, status] = item.split(':')
        return {
          name: name.trim(),
          status: parseInt(status.trim(), 10)
        }
      })

      const container = document.getElementById('buttonContainer')
      container.innerHTML = '' // 清空之前的二级按钮

      buttonData.forEach(item => {
        // 创建按钮
        const button = document.createElement('div')
        button.className = 'qdcButton'
        button.textContent = item.name

        // 创建眼睛图标
        const eyeIcon = document.createElement('span')
        eyeIcon.className = 'eye-icon'

        // 根据状态设置眼睛图标的图片
        if (item.status === 0) {
          eyeIcon.classList.add('eye-icon--active')
        } else {
          eyeIcon.classList.add('eye-icon--default')
        }

        // 点击眼睛图标时切换图片并打印信息
        eyeIcon.addEventListener('click', function (event) {
          event.stopPropagation() // 阻止事件冒泡
          this.classList.toggle('eye-icon--active')
          this.classList.toggle('eye-icon--default')

          // 使用 window.getComputedStyle 获取准确的图片 URL
          const backgroundImage = window.getComputedStyle(this).backgroundImage
          console.log(`所在按钮的名称: ${button.textContent}, 眼睛的图片: ${backgroundImage}`)
        })

        // 点击按钮时切换状态和打印按钮名称
        button.addEventListener('click', function () {
          this.classList.toggle('button--active')
          const backgroundImage = window.getComputedStyle(this).backgroundImage
          console.log(`当前按钮的名称: ${this.textContent}, 当前按钮的图片: ${backgroundImage}`)
        })

        // 将眼睛图标添加到按钮中，并将按钮添加到容器中
        button.appendChild(eyeIcon)
        container.appendChild(button)
      })
    });
  </script>
</body>

</html>